<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link type="text/css" rel="stylesheet" href="index.css">
    <script type="text/javascript" src="flexible.min.js">
    </script>
    <title>主页</title>
</head>
<style>
    /* 初始化 */
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    a {
        text-decoration: none;
        color: #fff;
    }

    ul {
        list-style: none;
    }

    .clearfix:after,
    .clearfix:before {
        content: "";
        display: block;
        clear: both
    }

    /* body背景，规定字体 */
    body {
        background: url('./img/beijing.png') no-repeat;
        background-size: cover;
        color: #0f5000;
        position: absolute;
        left: 0px;
        right: 0px;
        top: 0px;
        bottom: 0px;
    }

    /* 头部区域 */
    .indexTop {
        width: 100%;
        height: 50px;
    }

    .indexTop>img {
        width: 100%;
    }

    /* 主体 */
    .container {
        width: 65%;
        height: 70%;
        position: relative;
        top: 25%;
        transform: translateX(32%);
        overflow: hidden;
        padding: 5px
    }

    .container li {
        width: 20%;
        text-align: center;
        float: left;
        margin: 5px;
        padding: 10px;
        position: relative;
        overflow: hidden
    }
    .imgbox{
        width:100%;
        height:100%
    }
    .imgbox img{
        width:70%;
        height:70%;
    }
    .container li .imgbox,.container li .text{
        margin-top: 20px;
    }




</style>

<body>
<!-- 头部 -->
<div class="indexTop">
    <img src="./img/top01.png" alt="">
</div>
<!-- 主体 -->

<a href="#" id='8'>
    <div class="text">创意题目</div>
</a>

<div class="container">
    <ul class="clearfix">

        <li>
            <a href="#" id='0'>
                <div class="imgbox"><img src="./img/tubiao0001.png" alt=""></div>
                <div class="text">灯光控制</div>
            </a>
        </li>

        <li>
            <a href="#" id='1'>
                <div class="imgbox"><img src="./img/tubiao0002.png" alt=""></div>
                <div class="text">空调控制</div>
            </a>
        </li>

        <li>
            <a href="#" id='2'>
                <div class="imgbox"><img src="./img/tubiao0003.png" alt=""></div>
                <div class="text">人才市场</div>
            </a>
        </li>


        <li>
            <a href="#" id='3'>
                <div class="imgbox"><img src="./img/tubiao0004.png" alt=""></div>
                <div class="text">生产环节</div>
            </a>
        </li>

    </ul>
    <ul class="clearfix">
        <li>
            <a href="#" id='4'>
                <div class="imgbox"><img src="./img/tubiao0005.png" alt=""></div>
                <div class="text">问题车辆仓库</div>
            </a>
        </li>
        <li>
            <a href="#" id='5'>
                <div class="imgbox"><img src="./img/tubiao0006.png" alt=""></div>
                <div class="text">生产线补货</div>
            </a>
        </li>
        <li>
            <a href="#" id='6'>
                <div class="imgbox"><img src="./img/tubiao0007.png" alt=""></div>
                <div class="text">销售报表</div>
            </a>
        </li>
        <li>
            <a href="#" id='7'>
                <div class="imgbox"><img src="./img/tubiao0008.png" alt=""></div>
                <div class="text">智能采购</div>
            </a>
        </li>
    </ul>

</div>

<script>
    document.getElementById('0').onclick = function () {
        if(window.nativeMethod){
            nativeMethod.startActivity(1);
        }
    };
    document.getElementById('1').onclick = function () {
        if(window.nativeMethod){
            nativeMethod.startActivity(2);
        }
    };
    document.getElementById('2').onclick = function () {
        if(window.nativeMethod){
            nativeMethod.startActivity(3);
        }
    };
    document.getElementById('3').onclick = function () {
        if(window.nativeMethod){
            nativeMethod.startActivity(4);
        }
    };
    document.getElementById('4').onclick = function () {
        if(window.nativeMethod){
            nativeMethod.startActivity(5);
        }
    };
    document.getElementById('5').onclick = function () {
        if(window.nativeMethod){
            nativeMethod.startActivity(6);
        }
    };
    document.getElementById('6').onclick = function () {
        if(window.nativeMethod){
            nativeMethod.startActivity(7);
        }
    };
    document.getElementById('7').onclick = function () {
        if(window.nativeMethod){
            nativeMethod.startActivity(8);
        }
    };
    document.getElementById('8').onclick = function () {
        if(window.nativeMethod){
            nativeMethod.startActivity(9);
        }
    };



</script>

</body>

</html>